<!--
 * @Description:
 * @version:
 * @Author: sunqian_sr
 * @Date: 2022-11-22 18:37:31
 * @LastEditors: Andy
 * @LastEditTime: 2023-03-29 17:13:13
-->
<template>
  <div class="home-page">
    <div class="flex-row row-item">
      <div class="home-flow-panel background">
        <!-- <div class="title-panel">
          <label>流程中心</label>
        </div> -->
        <x-tab :title="'流程中心'" :isShowExpand="false">
          <flow-center ref="flowCenterCom" :dict-options="dictOptions" />
        </x-tab>
      </div>
      <div class="home-flow-notice background">
        <!-- <div class="title-panel">
          <label>公告信息</label>
        </div> -->
        <x-tab :title="'公告信息'" :isShowExpand="false" :isShowMore="true" @on-More="gotPage('notice')">
          <notice-info ref="noticeInfoCom" :dict-options="dictOptions" />
        </x-tab>
      </div>
    </div>
    <div class="flex-row flex-1">
      <div class="home-todo-panel background">
        <x-tab :isShowExpand="false" :isShowMore="true" @on-More="gotPage('todo')">
          <template #title>
            <el-badge :value="unTodoCount" :hidden="unTodoCount === 0" class="item">
              <label>待办审批</label>
            </el-badge>
          </template>
          <todo-audit ref="todoAuditCom" @on-count="getUnTodoCount" />
        </x-tab>
        <!-- <div class="title-panel">
          <el-badge :value="unTodoCount" :hidden="unTodoCount === 0" class="item">
            <label>待办审批</label>
          </el-badge>
          <span @click="gotPage('todo')">更多 <em class="el-icon-d-arrow-right"></em></span>
        </div> -->
      </div>
      <div class="home-visit-panel">
        <div class="top background flex-column">
          <!-- <div class="title-panel">
            <label>快捷访问</label>
          </div> -->
          <x-tab :title="'快捷访问'" :isShowExpand="false" :isShowMore="false">
            <quick-access ref="quickAccessCom" :dict-options="dictOptions" />
          </x-tab>
        </div>
        <div class="bottom background flex-column">
          <!-- <div class="title-panel">
            <label>供应商概况</label>
          </div> -->
          <x-tab :title="'供应商概况'" :isShowExpand="false" :isShowMore="false">
            <supplier-view />
          </x-tab>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapState, mapActions } from 'pinia'
  import { QueryDictMixin, PermissionsMixin } from '@package/utils'
  import { pinias } from '@/common/pinia'
  import FlowCenter from '../components/flowCenter.vue'
  import NoticeInfo from '../components/noticeInfo.vue'
  import QuickAccess from '../components/quickAccess.vue'
  import TodoAudit from '../components/todoAudit.vue'
  import SupplierView from '../components/supplierView.vue'

  const { login } = pinias
  export default {
    components: { FlowCenter, NoticeInfo, QuickAccess, TodoAudit, SupplierView },
    mixins: [QueryDictMixin, PermissionsMixin],
    data() {
      return {
        unTodoCount: 0,
        dictKeys: ['xflow.flow_category', 'upms_notice.notice_type', 'system.state'],
        srmKeys: ['srm_supplier_info.supplier_state']
      }
    },
    computed: {
      ...mapState(login, ['userName'])
    },
    created() {
      this.initDictConfig()
    },
    methods: {
      getUnTodoCount(val) {
        this.unTodoCount = val
      },
      gotPage(page) {
        let path = ''
        const query = {}
        switch (page) {
          case 'notice':
            path = '/noticeCenter'
            break
          case 'todo':
            path = '/workflow/flowTodo'
            break
          case 'visit':
            path = '/workflow/flowEngine'
            break
        }
        this.$router.push({
          path,
          query
        })
      }
    }
  }
</script>
<style lang="scss">
  @import '../style/index.scss';
  ::v-deep .el-badge.item .el-badge .el-badge__content.is-fixed {
    right: 0 !important;
  }
</style>
<style scoped>
  ::v-deep .el-badge .el-badge__content.is-fixed {
    right: 0 !important;
    top: 5px;
  }
  ::v-deep .x-tab-container {
    height: 100%;
  }
</style>
